<template>
    <div class="flex flex-col" :class="onTop ? 'm-2 gap-1' : 'py-2 gap-0.5'">
        <Collapse title="发行时间" :hideBar="onTop" type="success">
            <SelectTag v-model="time" :options="timeOptions" title="发行时间" :titleInline="!onTop" type="success" />
        </Collapse>
        <Collapse title="罩杯大小" :hideBar="onTop" type="success">
            <SelectTag v-model="cap" :options="capOptions" title="罩杯" :titleInline="!onTop" type="success" />
        </Collapse>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

defineProps({ onTop: { type: Boolean, default: false } })

const time = ref([])
const cap = ref([])

const timeOptions = ref(["60年代", "70年代", "80年代", "90年代", "00年后", "10年后", "20年后"]);
const capOptions = ref(["A-Cap", "B-Cap", "C-Cap", "D-Cap", "E-Cap", "F-Cap", "G-Cap"]);

</script>